import React,{useState,useEffect} from 'react'
import { Breadcrumb } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import { useLocation } from 'react-router-dom';

export default function Bread() {
  const [breadname,setBreadName] = useState('')
  const {pathname} = useLocation()
  // 不是在组件mounted时获取路径，而是路径一旦发生变化，就要获取对应的路径名称，并且修改breadname的值 
  // 监听路由路径(/list,/edit,/means)
  useEffect(()=>{
    switch(pathname){
      case "/listtable":
        setBreadName('查看文章列表table');
        break;
        case "/listlist":
          setBreadName('查看文章列表list');
          break;
        case "/edit":
        setBreadName('文章编辑');
        break;
        case "/means":
        setBreadName('编辑资料');
        break;
        default:
          setBreadName(pathname.includes('edit')?'文章编辑':'')
          break;
    }
  },[pathname])
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="/">
         <HomeOutlined />
      </Breadcrumb.Item>
    <Breadcrumb.Item>{breadname}</Breadcrumb.Item>
  </Breadcrumb>
  )
}
